<div class="demo-container" dAnchorBox dAnchorHashSupport [view]="{ top: 60, bottom: 0 }">
  <d-demo-nav [navItems]="navItems"></d-demo-nav>
  <div [dAnchor]="'basic-usage'" class="demo-example">
    <div class="demo-title">基本用法</div>
    <div class="demo-text">
      传入菜单，监听含子项的可展开菜单的开合事件(menuToggle)或可点击菜单的点击事件(itemClick)。<br />
      可展开菜单默认展开使用属性open，可点击菜单默认激活使用属性active，禁用项使用disabled。<br />
      通过restrictOneOpen设置是否限制只能展开一个一级菜单。
    </div>
    <d-codebox id="accordion-demo-basic" [sourceData]="AccordionDemoBasic">
      <d-basic demo></d-basic>
    </d-codebox>
  </div>
  <div [dAnchor]="'use-built-in-routing-and-link-types'" class="demo-example">
    <div class="demo-title">使用内置路由和链接类型</div>
    <div class="demo-text">
      通过设置linkType切换不同的内置路由和链接类型：默认类型''；
      路由类型'routerLink'；外链类型：'hrefLink'；基于数据判断路由或链接类型：'dependOnLinkTypeKey'。
    </div>
    <d-codebox id="accordion-demo-link" [sourceData]="AccordionDemolink">
      <d-link demo></d-link>
    </d-codebox>
  </div>
  <div [dAnchor]="'using-templates'" class="demo-example">
    <div class="demo-title">使用模板</div>
    <div class="demo-text">
      可展开菜单和可点击菜单分别使用模板。可展开菜单指定menuItemTemplate，可点击菜单指定itemTemplate。<br />
      没有数据模板指定noContentTemplate，并可以通过showNoContent控制无数据的时候不展开。<br />
      加载中模板指定loadingTemplate，通过item的loadingKey对应的属性值控制是否显示加载中。<br />
    </div>
    <d-codebox id="accordion-demo-template" [sourceData]="AccordionDemoTemplate">
      <d-template demo></d-template>
    </d-codebox>
    <div class="demo-text">
      内部列表通过制定innerListTemplate使用模板
    </div>
    <d-codebox id="accordion-demo-inner-list-template" [sourceData]="AccordionDemoInnerListTemplate">
      <d-inner-list-template demo></d-inner-list-template>
    </d-codebox>
  </div>

  <div [dAnchor]="'compound-level-and-auto-expand'" class="demo-example">
    <div class="demo-title">复合层级和自动展开</div>
    <div class="demo-text">
      支持多层级和不限制嵌套层级。可以独立使用autoOpenActiveMenu使得激活的菜单的父层级自动展开。
    </div>
    <d-codebox id="accordion-demo-multi-level" [sourceData]="AccordionDemoMultiLevel">
      <d-multi-level demo></d-multi-level>
    </d-codebox>
  </div>
  <div [dAnchor]="'change-values'" class="demo-example">
    <div class="demo-title">改变键值</div>
    <div class="demo-text">
      通过titleKey, childrenKey, disabledKey, activeKey等等改变数组键值，适配不同的接口类型定义。
    </div>
    <d-codebox d="accordion-demo-change-key" [sourceData]="AccordionDemoChangeKey">
      <d-change-key demo></d-change-key>
    </d-codebox>
  </div>
</div>
